<template>
  <div>
    <!-- 表单查询 -->
    <div class="top">
      <Form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <Row :gutter="[16, 1]" style="margin-right: 16px">
          <Col :span="6">
            <Form.Item label="姓名">
              <a-input
                v-model:value="formState.name"
                autocomplete="off"
                allow-clear
                :maxlength="30"
                placeholder="请输入"
              ></a-input>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="年级">
              <a-select
                ref="select"
                v-model:value="formState.gradeId"
                placeholder="请选择"
                :allow-clear="stateUser.identity === 8"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onChangeGrade"
              >
                <a-select-option
                  v-for="(item, index) of optionList.gradeList"
                  :key="index"
                  :value="item.gradeId"
                  >{{ item.gradeName }}</a-select-option
                >
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="班级">
              <a-select
                ref="select"
                v-model:value="formState.infoClass"
                :allow-clear="stateUser.identity === 8"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
              >
                <a-select-option
                  v-for="(item, index) of optionList.classList"
                  :key="index"
                  :value="item.id"
                  >{{ item.className }}</a-select-option
                >
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="宿舍楼">
              <a-select
                ref="select"
                v-model:value="formState.dormitoryId"
                placeholder="请选择"
                allow-clear
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onSelectDormitory"
              >
                <a-select-option
                  v-for="(item, index) of optionList.dormitoryList"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="房间名">
              <a-cascader
                v-model:value="formState.roomId"
                allow-clear
                :options="optionList.roomList"
                placeholder="请选择"
                :load-data="onLoadDataRoom"
                :field-names="{ label: 'name', value: 'id' }"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onChangeRoom"
              />
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="审批状态">
              <a-select ref="select" v-model:value="formState.status" allow-clear>
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">未完成</a-select-option>
                <a-select-option value="1">已完成</a-select-option>
                <a-select-option value="2">审核中</a-select-option>
                <a-select-option value="3">已撤销</a-select-option>
                <a-select-option value="4">已拒绝</a-select-option>
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item name="name" label="请假时间">
              <a-range-picker
                format="YYYY-MM-DD"
                :value="formState.createValue"
                :placeholder="['开始日期', '结束日期']"
                :get-calendar-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onRangeChange"
                @ok="onRangeOk"
              />
            </Form.Item>
          </Col>
        </Row>
        <div class="search">
          <div class="search-btn">
            <a-button type="primary" @click="query()">查询</a-button>
            <a-button ghost style="margin: 0 0 0 16px" @click="reset">重置</a-button>
          </div>
        </div>
      </Form>
    </div>
    <!-- 列表 -->
    <div class="below">
      <div class="search">
        <div
          class="search-btn-right"
          style="margin-right: 16px; display: flex; align-items: center"
        >
          <a-button type="primary" ghost @click="onExport">
            <template #icon><ToTopOutlined /></template>
            导出
          </a-button>
        </div>
      </div>
      <!-- 表格 -->
      <div>
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="tableData.records"
          :row-key="
            (record, index) => {
              return index;
            }
          "
          :pagination="false"
          :loading="loading"
          :scroll="{ x: 1300 }"
        >
          <template v-slot:emptyText>{{ loading ? '' : '暂无数据' }}</template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'className'">
              <p class="pStyle">{{ record.gradeName }}{{ record.className }}</p>
            </template>
            <template v-if="column.dataIndex === 'leaveReason'">
              <Tooltip
                :overlay-style="{ whiteSpace: 'normal' }"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                placement="topLeft"
                :title="record.leaveReason"
              >
                <p class="pStyle">{{ record.leaveReason }}</p>
              </Tooltip>
            </template>
            <template v-if="column.dataIndex === 'timeRange'">
              <div v-if="record.leaveMethod === 1">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.timeRange + ' ' + record.beginTime + '-' + record.nextEndTime"
                >
                  <p class="pStyle">{{ record.timeRange }}</p>
                  <p class="pStyle">{{ record.beginTime }}-{{ record.nextEndTime }}</p>
                </Tooltip>
              </div>
              <div v-else>
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.beginTime + '-' + record.endTime"
                >
                  <p class="pStyle">{{ record.beginTime }}-{{ record.endTime }}</p>
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'status'">
              {{
                record.status === 0
                  ? '未完成'
                  : record.status === 1
                  ? '已完成'
                  : record.status === 2
                  ? '审核中'
                  : record.status === 3
                  ? '已撤销'
                  : '已拒绝'
              }}
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button size="small" ghost class="z-btn-24" @click="onStundentDeta(record)"
                >查看</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <span style="color: #999999; margin-right: 8px">共{{ tableData.pages }}页</span>
        <a-pagination
          v-model:current="tableData.current"
          v-model:pageSize="tableData.size"
          :page-size-options="pageSizeOptions"
          show-quick-jumper
          :total="tableData.total"
          :show-size-changer="true"
          @change="onChangePagination"
        />
      </div>
    </div>
    <!-- 查看 个人信息 -->
    <my-dialog
      :dialog-state="personalInfoTap.visible"
      :dialog-title="personalInfoTap.title"
      :dialog-width="personalInfoTap.width"
      :icon-type="personalInfoTap.iconType"
      :footer="false"
      @handleCancel="personalInfoTap.visible = false"
      @handleOk="personalInfoTap.visible = false"
    >
      <template v-slot:location>
        <div class="personal-info">
          <div class="photo">
            <img v-if="personalInfo.img" :src="personalInfo.img" alt="" />
            <img
              v-else
              src="@/assets/images/accommodation/popup_img_peo.png"
              alt=""
              style="width: 80px; height: 106px"
            />
          </div>
          <div style="width: 80%">
            <Descriptions bordered :column="2" :label-style="labelStyle">
              <Descriptions.Item label="学生姓名">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.name"
                >
                  <p class="descriptionsItemStyle">
                    {{ personalInfo.name }}
                  </p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="宿舍楼">
                <p class="descriptionsItemStyle">{{
                  personalInfo.floor ? personalInfo.floor : '--'
                }}</p>
              </Descriptions.Item>
              <Descriptions.Item label="房间">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.room"
                >
                  <p class="descriptionsItemStyle">{{ personalInfo.room }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="班级">
                <p class="descriptionsItemStyle">{{ personalInfo.class }}</p>
              </Descriptions.Item>
              <Descriptions.Item label="请假原因">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.reason"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.reason ? personalInfo.reason : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="请假时间">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.time"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.time ? personalInfo.time : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="发起时间">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.time2"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.time2 ? personalInfo.time2 : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="审批状态">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.status"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.status ? personalInfo.status : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
            </Descriptions>
          </div>
        </div>
      </template>
    </my-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch } from 'vue';
import { Form, Row, Col, Cascader, Tooltip, message, Descriptions } from 'ant-design-vue';
import { ToTopOutlined } from '@ant-design/icons-vue';
import { getDormitory, floorList, floorRoom, roomBedNum, gradeList, classList } from '@/api/common';
import { listLeaveRecord, exportLeaveRecord } from '@/api/leaveInquiry';
import { useStore } from 'vuex';
import MyDialog from '@/components/dialog/index.vue';
onMounted(() => {
  getRoomBedNum();
  getDormitoryList();
  getGradeList();
  // 下边注释
  // getTableList();
});
const loading = ref(true);
const store = useStore();
const stateUser = computed(() => store.state.user.STATE_USER);
// const classInfoListLength = computed(() => stateUser.value.classInfoList.length);
// watch(classInfoListLength, () => {
//   getGradeList();
// });
// const stateUser = ref(JSON.parse(localStorage.getItem('STATE_USER')));

// 下拉选项列表
const optionList = ref({
  dormitoryList: [],
  roomList: [],
  roomBedNum: [],
  gradeList: [],
  classList: []
});
// 个人信息数据
const personalInfo = ref({
  name: '的就是肯定就是肯定就是肯定就是肯定就是的数据库大家思考的',
  img: '',
  floor: '1楼',
  room: '大多数都是',
  class: '的似的是的书店',
  reason: '得瑟得瑟得瑟得瑟得瑟',
  time: '的似的是的书店',
  time2: '第都是四雕塑',
  status: '1'
});
// 查看 个人信息 弹窗
const personalInfoTap = reactive({
  title: '请假详情',
  visible: true,
  width: '585px',
  iconType: 'default'
});
// 查看
const onStundentDeta = value => {
  // studentDetail(value.studentUserId).then(res => {
  //   console.log(res, '个人信息');
  //   personalInfo.value = res.data.data;
  // });
  // personalInfoTap.visible = true;
};
// 获取宿舍楼列表
const getRoomBedNum = () => {
  roomBedNum().then(res => {
    if (res.data.code === 200) {
      optionList.value.roomBedNum = res.data.data;
    }
  });
};

// 获取宿舍楼列表
const getDormitoryList = () => {
  getDormitory(0).then(res => {
    if (res.data.code === 200) {
      optionList.value.dormitoryList = res.data.data;
      optionList.value.roomList = res.data.data;
      optionList.value.roomList.forEach(elem => {
        elem.isLeaf = false;
      });
    }
  });
};
// 获取宿舍楼层列表
const getFloorList = value => {
  floorList(value).then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(elem => {
        let obj = {
          name: `${elem.storey}楼`,
          storey: elem.storey,
          id: elem.storey,
          dormitoryId: elem.id,
          floor: elem.floor,
          isLeaf: false
        };
        optionList.value.roomList.push(obj);
      });
    }
  });
};
// 改变宿舍楼回调
const onSelectDormitory = value => {
  formState.value.roomId = [];
  optionList.value.roomList = [];
  if (value !== undefined) {
    getFloorList(value);
  } else {
    getDormitoryList();
  }
};
// 选择房间回调
const onChangeRoom = (value, selectedOptions) => {
  if (selectedOptions[0].dormitoryId !== undefined) {
    formState.value.dormitoryId = selectedOptions[0].dormitoryId;
  } else {
    formState.value.dormitoryId = value[0];
  }
};
// 选择房间异步动态加载
const onLoadDataRoom = selectedOptions => {
  if (!formState.value.dormitoryId) {
    formState.value.dormitoryId = selectedOptions[0].id;
  }

  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true; // load options lazily
  if (targetOption.dormitoryName) {
    floorList(targetOption.id).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: `${elem.storey}楼`,
            id: elem.storey,
            storey: elem.storey,
            floor: elem.floor,
            isLeaf: false
          };
          targetOption.children.push(obj);
        });
        optionList.value.roomList = [...optionList.value.roomList];
      }
    });
  }
  if (targetOption.floor) {
    let id = formState.value.dormitoryId || formState.value.roomId[0];
    floorRoom(id, targetOption.storey).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: elem.name,
            id: elem.id,
            isLeaf: true
          };
          targetOption.children.push(obj);
        });
        optionList.value.roomList = [...optionList.value.roomList];
      }
    });
  }
};
// 获取年级列表
const getGradeList = () => {
  gradeList().then(res => {
    if (res.data.code === 200) {
      if (stateUser.value.identity !== 8) {
        let arr = stateUser.value.classInfoList.map(v => v.gradeId);
        let list = [];
        res.data.data.forEach(v => {
          if (arr.indexOf(v.gradeId) !== -1) list.push(v);
        });
        res.data.data = list;
      }
      optionList.value.gradeList = res.data.data;

      if (stateUser.value.identity !== 8) {
        formState.value.gradeId = optionList.value.gradeList.length
          ? optionList.value.gradeList[0].gradeId
          : null;
        optionList.value.classList = [];
        classList({ gradeId: formState.value.gradeId }).then(res => {
          if (res.data.code === 200) {
            // if (stateUser.value.identity !== 8) {
            let arr = stateUser.value.classInfoList.filter(
              v => v.gradeId === formState.value.gradeId
            )[0].classIdList;
            let list = [];
            res.data.data.forEach(v => {
              if (arr.indexOf(v.id) !== -1) list.push(v);
            });
            res.data.data = list;
            // }
            optionList.value.classList = res.data.data;
            formState.value.infoClass = optionList.value.classList.length
              ? optionList.value.classList[0].id
              : null;
          }
        });
      }
      query();
    }
  });
};
// 选择年级改变回调
const onChangeGrade = value => {
  formState.value.infoClass = undefined;
  optionList.value.classList = [];
  classList({ gradeId: value }).then(res => {
    if (res.data.code === 200) {
      if (stateUser.value.identity !== 8) {
        let arr = stateUser.value.classInfoList.filter(
          v => v.gradeId === formState.value.gradeId
        )[0].classIdList;
        let list = [];
        res.data.data.forEach(v => {
          if (arr.indexOf(v.id) !== -1) list.push(v);
        });
        res.data.data = list;
      }
      optionList.value.classList = res.data.data;
      formState.value.infoClass = optionList.value.classList.length
        ? optionList.value.classList[0].id
        : '';
    }
  });
};
// 表单查询
const formRef = ref();
const formState = ref({
  name: '', // 姓名
  gradeId: undefined, // 年级
  infoClass: undefined, // 班级
  dormitoryId: undefined, // 宿舍楼
  roomId: undefined, // 房间名称
  status: '', // 审批状态
  startTime: '', // 请假开始时间
  endTime: '', // 请假结束时间
  createValue: ''
});
// 表格信息
const tableData = ref([]);
// 获取列表信息
let parmas = ref({
  size: 10,
  current: 1,
  orders: [
    {
      column: 'create_time',
      asc: false
    }
  ],
  data: {
    userIds: [], // 先不传
    beginTime: '', // 开始时间
    endTime: '', // 结束时间
    timeArrange: [], // 时间范围先不传
    gradeId: null, // 年级ID
    classId: null, // 班级ID
    studentName: '', // 学生姓名
    dormitoryId: null, // 宿舍楼ID
    roomId: null, // 房间ID
    status: null // 审批状态
  }
});
function getTableList() {
  listLeaveRecord(parmas.value).then(res => {
    console.log(res);
    if (res.data.code === 200) {
      tableData.value = res.data.data;
      loading.value = false;
    }
  });
}
// 表格多选
// 表格多选
const selectedRowKeys = ref([]);
const selectedRows = ref([]);
// table 多选回调
const onSelectChange = (key, value) => {
  console.log(key, value);
  selectedRowKeys.value = key;
  selectedRows.value = value;
};
// 时间设置
const onRangeChange = (dates, dateString) => {
  formState.value.createValue = dates;
  if (dateString.length > 0) {
    formState.value.startTime = dateString[0];
    formState.value.endTime = dateString[1];
  }
};
const onRangeOk = value => {
  console.log('onOk: ', value);
};
// 查询 事件
function query() {
  parmas.value.data.beginTime = formState.value.startTime; // 开始时间
  parmas.value.data.endTime = formState.value.endTime; // 结束时间
  parmas.value.data.timeArrange = []; // 时间范围先不传
  parmas.value.data.gradeId = formState.value.gradeId; // 年级ID
  parmas.value.data.classId = formState.value.infoClass; // 班级ID
  parmas.value.data.studentName = formState.value.name; // 学生姓名
  parmas.value.data.dormitoryId = formState.value.dormitoryId; // 宿舍楼ID
  parmas.value.data.roomId = formState.value.roomId ? formState.value.roomId[1] : null; // 房间ID
  parmas.value.data.status = formState.value.status; // 审批状态
  selectedRowKeys.value = [];
  selectedRows.value = [];
  getTableList(parmas.value);
}
// 重置
async function reset() {
  selectedRowKeys.value = [];
  selectedRows.value = [];
  parmas.value.data = {};

  formState.value.startTime = ''; // 开始时间
  formState.value.endTime = ''; // 结束时间
  formState.value.createValue = [];
  formState.value.gradeId = null; // 年级ID
  formState.value.infoClass = null; // 班级ID
  formState.value.name = null; // 学生姓名
  formState.value.dormitoryId = null; // 宿舍楼ID
  formState.value.roomId = null; // 房间ID
  formState.value.status = ''; // 审批状态

  if (stateUser.value.identity !== 8) {
    await classList({ gradeId: formState.value.gradeId }).then(res => {
      if (res.data.code === 200) {
        let arr = stateUser.value.classInfoList.filter(
          v => v.gradeId === formState.value.gradeId
        )[0].classIdList;
        let list = [];
        res.data.data.forEach(v => {
          if (arr.indexOf(v.id) !== -1) list.push(v);
        });
        res.data.data = list;
        optionList.value.classList = res.data.data;
      }
    });
  }

  parmas.value.data.gradeId =
    stateUser.value.identity !== 8
      ? optionList.value.gradeList.length
        ? optionList.value.gradeList[0].gradeId
        : null
      : null; // 年级ID
  parmas.value.data.classId =
    stateUser.value.identity !== 8
      ? optionList.value.classList.length
        ? optionList.value.classList[0].id
        : null
      : null; // 班级ID
  formState.value.gradeId =
    stateUser.value.identity !== 8
      ? optionList.value.gradeList.length
        ? optionList.value.gradeList[0].gradeId
        : null
      : null; // 年级ID
  formState.value.infoClass =
    stateUser.value.identity !== 8
      ? optionList.value.classList.length
        ? optionList.value.classList[0].id
        : null
      : null; // 班级ID

  getTableList(parmas.value);
  getDormitoryList();
}
// 导出
function onExport() {
  let obj = {
    recordList: []
  };
  selectedRows.value.forEach(item => {
    let status = ref('未完成');
    switch (item.status) {
      case 0:
        status.value = '未完成';
        break;
      case 1:
        status.value = '已完成';
        break;
      case 2:
        status.value = '审核中';
        break;
      case 3:
        status.value = '已撤销';
        break;
      case 4:
        status.value = '已拒绝';
        break;
      default:
        status = '未完成';
    }
    console.log('导出status', status.value);
    obj.recordList.push({
      studentName: item.studentName,
      dormitoryName: item.dormitoryName,
      dormitoryRoomName: item.dormitoryRoomName,
      className: item.gradeName + item.className,
      leaveReason: item.leaveReason,
      leaveTime:
        item.leaveMethod === 1
          ? item.timeRange + item.beginTime + '-' + item.nextEndTime
          : item.beginTime + '-' + item.endTime,
      createTime: item.createTime,
      status: status.value
    });
  });
  if (selectedRows.value.length <= 0) {
    message.warning('请至少选择一条导出的数据');
  } else {
    exportLeaveRecord(obj).then(res => {
      console.log(res);
      let url = window.URL.createObjectURL(res.data);
      let file = document.createElement('a');
      document.body.appendChild(file);
      file.href = url;
      file.download = '请假记录.xls';
      file.click();
      window.URL.revokeObjectURL(url);
    });
  }
}
// 指定每页条数
const pageSizeOptions = ref(['10', '20', '30', '40', '50', '100', '500', '1000']);
// 分页发生改变
const onChangePagination = value => {
  console.log(value);
  parmas.value.current = value;
  getTableList(parmas.value);
};

const columns = reactive([
  {
    key: 'studentName',
    title: '姓名',
    dataIndex: 'studentName',
    scopedSlots: { customRender: 'studentName' },
    fixed: 'left'
  },
  {
    key: 'dormitoryName',
    title: '所属宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' }
  },
  {
    key: 'dormitoryRoomName',
    title: '房间',
    dataIndex: 'dormitoryRoomName',
    scopedSlots: { customRender: 'dormitoryRoomName' }
  },
  {
    key: 'className',
    title: '班级',
    dataIndex: 'className',
    scopedSlots: { customRender: 'className' }
  },
  {
    key: 'leaveReason',
    title: '请假原因',
    dataIndex: 'leaveReason',
    scopedSlots: { customRender: 'leaveReason' }
  },
  {
    key: 'timeRange',
    title: '请假时间',
    dataIndex: 'timeRange',
    scopedSlots: { customRender: 'timeRange' }
  },
  {
    key: 'createTime',
    title: '发起时间',
    dataIndex: 'createTime',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '审批状态',
    key: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
    fixed: 'right',
    customCell: (record, rowIndex) => {
      // 在此处可以修改单元格中的样式
      if (record.status === 0) {
        return {
          style: { color: '#8dc63f' }
        };
      } else if (record.status === 1) {
        return {
          style: { color: '#56D6B7' }
        };
      } else if (record.status === 2) {
        return {
          style: { color: '#D6AA56' },
          title: '审核中'
        };
      } else if (record.status === 3) {
        return {
          style: { color: '#0081ff' }
        };
      } else if (record.status === 4) {
        return {
          style: { color: '#FE8F8F' }
        };
      }
    }
  },
  {
    key: 'action',
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    width: 100
  }
]);
const labelCol = reactive({
  xs: { span: 8 },
  xl: { span: 8 },
  xxl: { span: 6 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  xl: { span: 24 },
  xxl: { span: 24 }
});
</script>

<style lang="less" scoped>
@import './index.less';
.top,
.below {
  width: 100%;
  padding: 24px 0;
  background: #ffffff;
  border-radius: 4px;
}
.below {
  padding: 24px;
  min-height: 717px;
  .ranking {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e1dddd;
    padding-bottom: 16px;
    margin-bottom: 16px;
    &-text {
      font-size: 18px;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      font-weight: 500;
      color: #222222;
    }
  }
  .search {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    .search-btn-left {
      width: 40%;
      display: flex;
      justify-content: flex-start;
      a-button {
        margin-left: 16px;
      }
    }
    .search-btn-right {
      width: 40%;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.top {
  margin-bottom: 24px;
  .search {
    display: flex;
    justify-content: flex-end;
    margin-right: 22px;
  }
}
.pagination {
  align-items: center;
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.pStyle {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.micro-dormitory-tabs-tab {
  font-size: 16px;
  padding: 12px 24px;
}
/deep/.micro-dormitory-select-arrow {
  top: 40%;
}
/deep/.micro-dormitory-select-selection-item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 8rem !important;
}
/deep/.micro-dormitory-cascader-menu {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 270px !important;
}
/deep/.micro-dormitory-cascader-menu-item-content,
/deep/.micro-dormitory-cascader-menu-item,
/deep/.micro-dormitory-cascader-menu-item-expand {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 270px !important;
}

// 外部
.descriptionsItemStyle {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto 0;
}
/deep/.micro-dormitory-select-arrow {
  top: 40%;
}
input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 2px 5px 0 0;
  background: transparent;
  border: 1px solid gray;
  -webkit-appearance: none;
  vertical-align: middle;
  margin-top: 0;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  min-height: 16px;
  min-width: 16px;
  position: relative;
  cursor: pointer;
}
input[type='checkbox']:checked {
  // background: #d6aa56;
  background: var(--van-primary-color-web);
  border: none;
}
input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  transform: translateX(-50%);
  // transform: translate(-50%, -50%);

  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 6px;
  width: 10px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.fileListStyle {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; //行数
  -webkit-box-orient: vertical;
}
/deep/.micro-dormitory-select-selection-item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 5rem !important;
}
/deep/.micro-dormitory-popover-inner {
  width: 146px;
}

// /deep/.micro-dormitory-cascader-menu {
//   white-space: nowrap !important;
//   overflow: hidden !important;
//   text-overflow: ellipsis !important;
//   width: 270px !important;
// }
/deep/.micro-dormitory-cascader-menu-item-content,
/deep/.micro-dormitory-cascader-menu-item,
/deep/.micro-dormitory-cascader-menu-item-expand {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 270px !important;
}
.info-content {
  /deep/.micro-dormitory-checkbox-wrapper {
    display: flex;
    align-items: center;
  }
}
/deep/.micro-dormitory-menu-item {
  overflow: visible;
}
/deep/.micro-dormitory-menu-title-content > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
}
.dormitory {
  /deep/.micro-dormitory-menu-title-content > span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 150px !important;
  }
}
/deep/.micro-dormitory-tooltip-inner {
  max-width: 140px;
}
/deep/.micro-dormitory-cascader-picker:hover .micro-dormitory-cascader-picker-clear {
  color: rgba(0, 0, 0, 0.25) !important;
}
</style>
